<template>
  <div>
    <a-menu
      v-model:selectedKeys="selectedKeys"
      class="text-color1"
      style="background-color: rgba(0, 0, 0, 0); /* 背景透明 */"
      :items="items"
      :mode="`${_attrs.mode}`"
      @click="handleClick"
    >
    </a-menu>
  </div>
</template>
<script setup>
import { h, reactive, onMounted, defineProps, watch, ref, computed } from "vue";
import useStore from "@/store/index";
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
  FileOutlined,
} from "@ant-design/icons-vue";

import { useAttrs } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const $attrs = useAttrs(); // 获取 attrs
// console.log($attrs); // 打印 attrs

// danger	展示错误状态样式
// disabled	是否禁用
// icon	菜单图标
// key	item 的唯一标志
// label	菜单项标题
// title	设置收缩时展示的悬浮标题
const items = reactive([
  {
    label: "文件",
    key: "sub1",
    icon: h(FileOutlined, { class: "ant-style-icon" }),
    path: "/gameList",
  },
  {
    label: "deepseek",
    key: "sub2",
    icon: h(AppstoreOutlined, { class: "ant-style-icon" }),
    path: "/chatClient",
  },
]);

// const props = defineProps(["mode"]);
// const mode = ref("inline");
// watch(
//   () => $attrs.mode ,
//   (newVal) => {
//     console.log("mode.value", mode.value);
//     mode.value = newVal;

//   }
// );
onMounted(() => {
  let store = useStore();
});
const onOpenChange = (openKeys) => {
  const latestOpenKey = openKeys.find(
    (key) => state.openKeys.indexOf(key) === -1
  );
  if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
    state.openKeys = openKeys;
  } else {
    state.openKeys = latestOpenKey ? [latestOpenKey] : [];
  }
};

// 创建计算属性
const _attrs = computed(() => {
  // 将 attrs 转换为普通对象（如果需要）
  const attrsObject = { ...$attrs };
  console.log("attrs", attrsObject);

  // 如果需要根据 attrs 的值动态计算其他值
  // mode.value = attrsObject.mode;

  return attrsObject;
});
const handleClick = (e) => {
  console.log("click", e);
  router.push(e.item.path);
};
</script>
